<template>
  <div class="app-header">
    <SidebarCollapse v-if="layout !== 'stream'"></SidebarCollapse>
    <Breadcrumb v-if="isBreadcrumb && layout !== 'stream'"></Breadcrumb>
    <div class="flex-1"></div>
    <ThemeSetting></ThemeSetting>
    <UserPanel></UserPanel>
  </div>
</template>

<script setup>
import SidebarCollapse from '@/layouts/widgets/SidebarCollapse/SidebarCollapse.vue'
import UserPanel from '@/layouts/widgets/UserPanel/UserPanel.vue'
import ThemeSetting from '@/layouts/widgets/ThemeSetting/ThemeSetting.vue'
import Breadcrumb from '@/layouts/widgets/Breadcrumb/Breadcrumb.vue'
import { useThemeStore } from '@/stores/theme'
import { computed } from 'vue'

const themeStore = useThemeStore()
const { isBreadcrumb, layout } = storeToRefs(themeStore)
</script>

<style lang="scss" scoped>
.app-header {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--base-gap);
  padding: 0 var(--base-gap);
}
</style>
